<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-row type="flex" justify="space-between">
          <!-- 添加房产 -->
          <el-col :span="24">
            <el-button type="primary" @click="addPropert">添加房产</el-button>
          </el-col>
          <!-- 全部分类下拉选择框 -->
          <el-col :span="24">
            <el-select v-model="formData.title" placeholder="全部分类" clearable style="width:110px">
              <el-option
                v-for="item in categoriesList"
                :key="item.id"
                :value="item.id"
                :label="item.title"
              />
            </el-select>
            <!-- 全部经纪下拉选择框 -->
            <el-select v-model="formData.name" placeholder="全部经纪" clearable style="width:110px">
              <el-option
                v-for="(item,index) in agentsList"
                :key="item.id"
                :label="item.name"
                :value="index"
              />
            </el-select>
            <!-- 搜索框 -->
            <el-input
              v-model="input"
              placeholder="请输入关键字"
              style="width:190px"
              class="input-with-select"
            />
            <el-button @click="searchFn">筛选</el-button>
          </el-col>
        </el-row>
        <!-- 上面的分割线 -->
        <el-divider />
        <el-table style="width:100%" border :data="tableData">
          <el-table-column label="封面" prop="photos">
            <template v-slot="{row}">
              <img :src="row.image" style="width:200px;height:200px">
            </template>
          </el-table-column>
          <el-table-column label="标题" prop="title" />
          <el-table-column label="标签" prop="tags">
            <template v-slot="{row}">
              <el-tag v-for="item in row.tags" :key="item" type="success">{{ item }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="地址" prop="address" />
          <el-table-column label="分类" prop="category.title" />
          <el-table-column label="经纪" prop="agent.name" />
          <el-table-column label="价格" prop="price" />
          <el-table-column label="介绍" prop="desc" />
          <el-table-column label="图片" prop="image">
            <template v-slot="{row}">
              <img :src="row.photos" style="width:200px;height:200px">
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button type="primary" @click="editFn(row.id)">编辑</el-button>
              <el-button type="danger" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 下面的分割线 -->
        <el-divider />
        <!-- 分页 -->
        <el-row type="flex" justify="center">
          <el-pagination
            background
            :page-size="list._limit"
            layout="prev, pager, next"
            :total="tableDataList"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>
      <Dialog ref="Dialog" :dialog-visible.sync="dialogVisible" @update="getProperty" />
    </div>
  </div>
</template>

<script>
import { delHouse, getPropertyList, classify, agents, getHouseNum, search } from '@/api/property'
import Dialog from './compoents/dialog.vue'
export default {
  components: {
    Dialog
  },
  data() {
    return {
      propertyList: [],
      agentsList: [], // 经纪列表
      formData: {
        title: '', // 分类
        name: '' // 经济
      },
      tableDataList: 0,
      dialogVisible: false,
      input: '',
      tableData: [], // 表格数据
      categoriesList: [], // 分类列表
      brokerList: [],
      list: {
        _limit: 3,
        _start: 0
      }
    }
  },
  async created() {
    this.getProperty()
    const res = await classify()
    this.categoriesList = res
    // console.log(106, res)
    this.agentsList = await agents()
  },
  methods: {
    // 搜索按钮
    async searchFn() {
      // console.log(125, this.formData.title)
      // console.log(126, this.formData.name)
      if (this.input || this.formData.title || this.formData.name) {
        const res = await search({
          _limit: this.list._limit,
          _start: this.list._start,
          title_contains: this.input || this.formData.title || this.formData.name || null,
          category: this.formData.title || null,
          agent: this.formData.name || null
        })
        // console.log(122, res)
        // console.log(129, this.formData.title)
        this.tableData = res
        this.tableDataList = res.length
      } else {
        this.getProperty()
      }
    },
    // 页码变化
    currentChange(page) {
      // console.log(120, page)
      this.list._start = page
      this.getProperty()
    },
    // 删除按钮
    async delFn(id) {
      // console.log(id)
      this.$confirm('你确定删除吗', '删除', {
        type: 'warning'
      }).then(async() => {
        await delHouse(id)
        this.getProperty()
      }).catch(() => {

      })
    },
    // 编辑按钮,调用子组件得数据回显事件
    editFn(id) {
      this.dialogVisible = true
      this.$refs.Dialog.editHuixian(id)
    },
    // 添加房产
    addPropert() {
      this.dialogVisible = true
    },
    // 渲染列表
    async getProperty() {
      const res = await getPropertyList(this.list)
      this.tableData = res
      // console.log(175, res)
      // 获取到全部页数
      const total = await getHouseNum()
      // console.log(151, total)
      this.tableDataList = total
    }
  }
}
</script>

<style>

</style>
